<template>
  <div>
    <input type="button" value="加载" @click="load" />
    <input type="button" value="卸载" @click="unload" />
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import MapCommon from "@/util/MapCommon";
import Material from "./Material";
import { materialServer } from "@/api/installServer";

@Component({
  name: "MaterialTest",
  components: {},
  mixins: [MapCommon]
})
export default class MaterialTest extends Vue {
  private mapId: string = "";
  private getComponent: any = null;
  private materailData = [
    {
      materialId: "753cae6ba85148c09193f7bce6bade41",
      materialName: "测试物资口罩",
      materialTypeName:"测试物资口罩1",
      materialTypeCode: "001",
      number: 1000,
      unitName: "箱",
      managerUnit: "测试单位",
      telephone: "13377228822",
      createTime: "2020-01-31 08:02:00",
      districtCode: "420102",
      applicationTime: null,
      needMaterialType: "0",
      contactPerson: "张三",
      longitude: 114.280102,
      latitude: 30.604387
    },
    {
      materialId: "753cae6ba85148c09193f7bce6bade42",
      materialName: "测试物资口罩2",
      materialTypeName:"测试物资口罩2",
      materialTypeCode: "002",
      number: 2000,
      unitName: "箱",
      managerUnit: "测试单位2",
      telephone: "13377228822",
      createTime: "2020-01-31 08:02:00",
      districtCode: "420102",
      applicationTime: null,
      needMaterialType: "1",
      contactPerson: "张三",
      longitude: 114.380102,
      latitude: 30.614387
    }
  ];
  private mounted() {
    // 地图容器id
    this.mapId = "map";
    (this as any).resolveMap(this.mapId).then((data: any) => {
      this.init(data.map);
    });
  }

  //  地图加载完成后，初始化
  private init(map: any) {
    const temp: any = this;
    // 地图配置
    const mapConfig = temp.$ioc.resolve(`mapConfig-${this.mapId}`);
    // 符号配置
    const symbolConfig = temp.$ioc.resolve(`symbolConfig-${this.mapId}`);
    // 通用的地图组件实例
    const GISComponents = temp.$ioc.resolve(`GISComponents-${this.mapId}`);
    //
    const component = new Material({
      map,
      symbolConfig,
      simpleRenderMgr: GISComponents.simpleRenderMgr,
      popupManager: GISComponents.popupManager,
      PointGeometryBuilder: GISComponents.PointGeometryBuilder,
      featureLocate: GISComponents.featureLocate,
      featureHighlight: GISComponents.featureHighlight,
      service: materialServer,
      showLevel: 18
    });
    this.getComponent = () => {
      return component;
    };
    component.on("mouse_popup", (data: any) => {
      jQuery("#popup_material_sjts").append(
        "<b>" + data.data.materialId + "</b>"
      );
      console.log(data);
    });
    component.on("popup", (data: any) => {
      if (Array.isArray(data.data)) {
        const datas: any = data.data;
        for (let i = 0, len = datas.length; i < len; i++) {
          const eleId = "#popup_material_sjts" + "_" + datas[i].materialId;
          jQuery(eleId).html("");
          jQuery(eleId).append(
            "<b>" + datas[i].managerUnit + datas[i].number + "</b>"
          );
        }
      } else {
        jQuery("#popup_material_sjts").append(
          "<b>" + data.data.materialId + "</b>"
        );
      }
      console.log(data);
      // jQuery('#' + data.containerId).append('<b>' + data.data.id + '</b>');
    });
  }

  private load() {
    this.getComponent().load(this.materailData);
  }

  private unload() {
    this.getComponent().unload();
  }
}
</script>
<style lang="less" scoped></style>
